const path = require('path');

// html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/js/index/index.js',
        login: './src/js/login/login.js',
        systemManage: './src/js/systemManage/systemManage.js',
        userManage: './src/js/systemManage/userManage.js',
        postManage:'./src/js/systemManage/postManage.js',
        myself:'./src/js/systemManage/myself.js',
        dataCenter: './src/js/dataCenter/dataCenter.js',
        clientManage: './src/js/lease/clientMange.js'
    },
    output: {
        // 设置打包后的代码存储路径
        path: path.resolve(__dirname, 'dist'),
        // 设置打包后的文件名
        filename: 'js/[name].js'
    },
    plugins: [
        // 张煌源 页面----------------
        new HtmlWebpackPlugin({
            template: './src/index.html', // 设置要打包的源文件 HTML 的路径
            filename: './index.html', // 设置打包后的文件路径和文件名
            chunks: ['index']  // 当前 HTML 文件中引入的 JS 的名字 
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: './login.html',
            chunks: ['login']
        }),
        new HtmlWebpackPlugin({
            template: './src/ZHYsystemHTML/systemManage.html',
            filename: './systemManage.html',
            chunks: ['systemManage']
        }),
        new HtmlWebpackPlugin({
            template: './src/ZHYsystemHTML/userManage.html',
            filename: './userManage.html',
            chunks: ['userManage']
        }),
        new HtmlWebpackPlugin({
            template: './src/ZHYsystemHTML/postManage.html',
            filename: './postManage.html',
            chunks: ['postManage']
        }),
        new HtmlWebpackPlugin({
            template: './src/ZHYsystemHTML/myself.html',
            filename: './myself.html',
            chunks: ['myself']
        }),
        // ----张煌源 结束----------------------------
        new HtmlWebpackPlugin({
            template: './src/dataCenter.html',
            filename: './dataCenter.html',
            chunks: ['dataCenter']
        }),
        //租赁html
        new HtmlWebpackPlugin({
            template: './src/lease-clientManage.html', // 设置要打包的源文件 HTML 的路径
            filename: './lease-clientManage.html', // 设置打包后的文件路径和文件名
            chunks: ['clientManage']  // 当前 HTML 文件中引入的 JS 的名字 
        }),
        // css 配置-------------
        new MiniCssExtractPlugin({
            // 打包后的 css 路径和文件名
            filename: './css/[name].css'
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from:path.resolve(__dirname,'./src/utils'),
                    to: 'utils'
                }
            ]
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // css 中的图片
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 8, // 8kb 以下的图片采用 base64 进行处理
                            outputPath: './images/',  // 打包后图片的存储路径
                            esModule: false
                        }
                    }
                ]
            },
            // html 中的图片
            {
                test: /\.html$/i,
                use: ['html-withimg-loader']
            },
            {
                test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].[ext]',// 打包后的文件名称
                            outputPath: '', // 默认是dist目录
                            publicPath: '../font/', // 图片的url前面追加'../font'
                            useRelativePath: true, // 使用相对路径
                            limit: 50000 // 表示小于1K的图片会被转化成base64格式
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        // port: 8888, //前端服务器端口号
        open: true, // 启动服务器时自动打开页面
        hot: true, // 热更新
        // proxy: {
        //     '/': {
        //         target: 'http://localhost:3000'  // 后端服务器地址
        //     }
        // }
    }
}